<template>
    <div class="main">
        <MainHeader></MainHeader>
        <div class="logoTitel">工位架构图</div>
        <div class="light-wrap">
            <div v-for="(item, index) in lights" :key="index" class="light-item" :class="{
                'light-itemTop': item.type === 'productRespons',
                'light-itemBottom': item.type === 'QCRespons',
                'light-itemLeft': item.type === 'leftEmployee',
                'light-itemRight': item.type === 'rightEmployee',
            }">
                <RecursiveItemTB v-if="['productRespons', 'QCRespons'].includes(item.type)" :item="item" :index="index"
                    @editItem="editItem" @deleteItem="deleteItem" @addBrotherItem="addBrotherItem"
                    @addChildItem="addChildItem" @toggleExpand="toggleExpand"
                    :parentChildrenLength="item.children && item.children.length" />
                <RecursiveItemRL v-if="['leftEmployee', 'rightEmployee'].includes(item.type)" :item="item"
                    :index="index" @editItem="editItem" @deleteItem="deleteItem" @addBrotherItem="addBrotherItem"
                    @addChildItem="addChildItem" @toggleExpand="toggleExpand"
                    :parentChildrenLength="item.children && item.children.length" />
            </div>
        </div>
    </div>
</template>


<script setup>
import MainHeader from '@/components/MainHeader.vue'
import { ref, onMounted, onBeforeUnmount } from 'vue';
import RecursiveItemTB from './components/RecursiveItemTB.vue';
import RecursiveItemRL from './components/RecursiveItemRL.vue';

// Mixin 替代方案
// 如果 JeecgListMixin 包含一些方法或数据，需要手动迁移这些方法和数据
// 这里假设 JeecgListMixin 中的方法和数据已经迁移到了这里

const lights = ref([
    {
        id: '1',
        title: '生产负责人',
        expanded: true,
        type: 'productRespons',
        children: [
            {
                id: '1.1',
                title: '负责A',
                expanded: true,
            },
            {
                id: '1.2',
                title: '负责B',
                expanded: true,
            },
        ]
    },
    {
        id: '3',
        title: '左边员工',
        expanded: true,
        type: 'leftEmployee',
        children: [
            {
                id: '3.1',
                title: '员工A',
                expanded: true,
            },
            {
                id: '3.2',
                title: '员工B',
                expanded: true,
            },
            {
                id: '3.2',
                title: '员工C',
                expanded: true,
            },
        ]
    },
    {
        id: '4',
        title: '右边员工',
        expanded: true,
        type: 'rightEmployee',
        children: [
            {
                id: '4.1',
                title: '员工A',
                expanded: true,
            },
            {
                id: '4.2',
                title: '员工B',
                expanded: true,
            },
        ]
    },
    {
        id: '2',
        title: 'QC质检负责人',
        expanded: true,
        type: 'QCRespons',
        children: [
            {
                id: '2.1',
                title: '质检A',
                expanded: true,
            },
            {
                id: '2.2',
                title: '质检B',
                expanded: true,
            },
        ]
    },
],);


// 生命周期钩子
onMounted(() => {

});

onBeforeUnmount(() => {
    // 清理工作
});


const toggleExpand = (index, item) => {
    item.expanded = !item.expanded;
    updateNodeAndFatherColor(lights.value, item);
};

const editItem = (index, item) => {
    updateName(lights.value, item.id, item);
};

const updateName = (nodes, targetId, newItem) => {
    for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].id === targetId) {
            nodes[i] = { ...nodes[i], ...newItem };
            return;
        }
        if (nodes[i].children && nodes[i].children.length > 0) {
            updateName(nodes[i].children, targetId, newItem);
        }
    }
};

const updateNodeAndFatherColor = (nodes, updatedNode = null) => {
    nodes.forEach(node => {
        if (updatedNode && node.id === updatedNode.id) {
            node.title = updatedNode.title;
        }
    });
};

const deleteItem = (index, item) => {
    lights.value = removeNode(lights.value, item.id);
    updateNodeAndFatherColor(lights.value);
};

const removeNode = (nodes, nodeId) => {
    return nodes
        .filter(node => node.id !== nodeId)
        .map(node => ({
            ...node,
            children: node.children ? removeNode(node.children, nodeId) : []
        }));
};

const addBrotherItem = (index, item) => {
    const newItem = {
        title: 'A',
        id: generateRandomId(16),
        children: [],
        expanded: true,
    };
    lights.value = addNode([...lights.value], item.id, newItem);
    updateNodeAndFatherColor(lights.value);
};

const addNode = (nodes, nodeId, newItem) => {
    for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].id === nodeId) {
            nodes.splice(i + 1, 0, newItem);
            return nodes;
        }
        if (nodes[i].children && nodes[i].children.length > 0) {
            nodes[i].children = addNode(nodes[i].children, nodeId, newItem);
        }
    }
    return nodes;
};

const generateRandomId = (length = 8) => {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let randomId = '';
    for (let i = 0; i < length; i++) {
        randomId += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return randomId;
};

const addChildItem = (index, item) => {
    if (!item.children) {
        item.children = [];
    }
    const newItem = {
        title: 'A',
        id: generateRandomId(16),
        children: [],
        expanded: true,
    };
    item.children.push(newItem);
    updateNodeAndFatherColor(lights.value);
};

// const addExpandedField = (treeData) => {
//     return treeData.map(node => {
//         node.expanded = true;
//         if (node.children && node.children.length > 0) {
//             node.children = addExpandedField(node.children);
//         }
//         return node;
//     });
// };


</script>



<style lang="scss" scoped>
.main {
    width: 100%;
    height: auto;
    padding: 20px;
    box-sizing: border-box;

    .logoTitel {
        text-align: center;
        font-weight: normal;
        color: var(--global-font-color);
        margin-bottom: 30px;
        font-size: 22px;
    }

    .light-wrap {
        overflow-x: auto;
        display: flex;
        flex-wrap: wrap;

        .light-item {
            width: 50% !important;

            &.light-itemBottom {
                transform: scaleY(-1);
            }

            &.light-itemRight {
                transform: rotate(180deg) scaleY(-1);
                display: flex;
                justify-content: end;
                padding-right: 15px;
                box-sizing: border-box;
                align-items: baseline;
            }

            &.light-itemLeft {
                display: flex;
                justify-content: end;
                padding-right: 14px;
                box-sizing: border-box;
            }

            &:first-child,
            &:last-child {
                width: 100% !important;
            }

        }
    }
}
</style>